<template>
  <div class="login">
    <Card :bordered="true">
      <p slot="title">登录</p>
      <div class="loginFormWp">
        <Form ref="formValidate" :model="form" :rules="ruleValidate" :label-width="80">
          <FormItem label="用户名" prop="username">
            <Input v-model="form.username" placeholder="请输入用户名" />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input v-model="form.password" type="password" placeholder="请输入密码" />
          </FormItem>
          <FormItem>
            <Button @click="login" type="primary" class="reg">登录</Button>
            <Button @click="registe" type="info" class="reg">注册</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
// import axios from "../axios";
import axios from 'axios';
import qs from 'qs';
import { RegisteUrl,UsersUrl } from "../baseUrl/index";
import ss from '../utils/ss'
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      getUser: {},
      ruleValidate: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 5,
            message: "用户名不能少于5个字符",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度必须在6位以上",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    login() {
      ss.remove();
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          this.getUserInfo();
        }
      });
    },
    registe() {
      this.$router.push("/registe");
    },
    getUserInfo() {
      axios({
        headers:{
          'Content-Type':'application/x-www-form-urlencoded'
        },
        url:UsersUrl,
        method:'post',
        data:qs.stringify({
          'name':this.form.username,
          'key':this.form.password
        })
      })
        .then(data=>{
          if(data.data.success){
            const userInfo = data.data.data
            userInfo.token = data.data.token
            ss.save(userInfo)
            this.$router.push('/home')
          } else {
            alert('用户名/密码错误，请重试！')
          }
        })
        .catch()
      // axios({
      //   url: RegisteUrl,
      //   method: "get",
      //   params: {
      //     transform: 1,
      //     order: "id,desc",
      //     filter: `username,eq,${this.form.username}`
      //   },
      //   success: data => {
      //     this.getUser = data.data.registe[0];
      //     this.confirmUserInfo();
      //     this.$router.push("/home");
      //   }
      // });
    },
    // confirmUserInfo() {
    //   if (this.getUser === undefined) {
    //     alert("该用户不存在");
    //   } else if (this.getUser.password !== this.form.password) {
    //     alert("用户名/密码错误");
    //   } else {
    //     ss.save(this.getUser);
    //   }
    // }
  },
  mounted(){
    if(ss.get().token){
      this.$router.push('/home')
    }
  }
};
</script>

<style scoped>
.login {
  margin: 120px auto 0;
  width: 30%;
}
.loginFormWp{
  width: 80%;
}
.reg{
  margin: 10px 10px 0 10px;
}
</style>
